<template>
  <div class="wishPage">
    <div class="searchBox bgfff">
      <el-form
        :inline="true"
        :model="form"
        label-width="90px"
        ref="formRef"
        class="demo-form-inline"
        size="small"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布人：" prop="user_name">
              <el-input
                v-model="form.user_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号：" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="所在小区：" prop="year">
              <el-select v-model="form.village_name" placeholder="请选择">
                <el-option label="不限" value="0"> </el-option>
               
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="心愿类型：" prop="type">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="普通服务" value="1"> </el-option>
                <el-option label="助老服务" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :span="8">
            <el-form-item label="完成状态：" prop="status">
              <el-select v-model="form.status" placeholder="请选择">
                <el-option label="全部" value="0"> </el-option>
                <el-option label="待认领" value="1"> </el-option>
                <el-option label="待处理" value="2"> </el-option>
                <el-option label="已完成" value="3"> </el-option>
                <el-option label="已取消" value="9"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <div class="time">
              <el-form-item label="发布时间：" prop="release_date">
                <el-date-picker
                  v-model="form.release_date"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5" style="display: flex; justify-content: flex-end">
            <el-form-item style="margin-right: 0">
              <el-button type="primary" size="small" @click="onSubmit"
                >查询</el-button
              >
              <el-button @click="resetForm('formRef')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tablesCard bgfff">
      <div class="tablesCardTop">
        <div></div>
        <div>
          <el-button type="primary" size="small" @click="addWishShow = true"
            >新增</el-button
          >
          <el-button type="primary" size="small" @click="importShow = true"
            >批量导入</el-button
          >
        </div>
      </div>
      <el-table :data="tableData" border size="small" style="width: 100%">
        <!-- height="580" -->
        <el-table-column prop="release_date" label="发布时间" align="center">
        </el-table-column>
        <el-table-column prop="user_name" label="发布人" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="village_name" label="所在小区" align="center">
        </el-table-column>
        <el-table-column prop="type_text" label="心愿类型" align="center" />
        <el-table-column prop="title" label="心愿标题" align="center">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.title" placement="top">
              <div
                style="
                  overflow: hidden;
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  white-space: normal;
                "
              >
                {{ scope.row.title }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="心愿价值" align="center" />
        <el-table-column prop="status_text" label="完成状态" align="center" />
        <el-table-column fixed="right" prop="" label="操作" align="center">
          <template slot-scope="scope">
            <div class="operateBtns">
              <el-link type="primary" @click="onBtns(1, scope.row)"
                >查看</el-link
              >
              <el-popover
                :ref="`popover-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认完成？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popover-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(2, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link
                  type="primary"
                  slot="reference"
                  v-show="scope.row.status == 2"
                  >完成</el-link
                >
              </el-popover>
              <el-popover
                :ref="`popremove-${scope.row.id}`"
                popper-class="myPopover"
                placement="left"
                width="160"
                trigger="click"
              >
                <p class="text">
                  <i class="el-icon el-icon-warning"></i>
                  是否确认删除？
                </p>
                <div class="btnBox">
                  <el-button
                    size="mini"
                    @click="$refs[`popremove-${scope.row.id}`].doClose()"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="onBtns(3, scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-link type="danger" slot="reference">删除</el-link>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageBlock">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page.sync="form.page"
          :page-size="form.limit"
          @size-change="
            (e) => {
              form.limit = e;
              getList();
            }
          "
          @current-change="
            (e) => {
              form.page = e;
              getList();
            }
          "
        >
        </el-pagination>
      </div>
    </div>
    <addWish
      v-if="addWishShow"
      @handleClose="
        (val) => {
          addWishShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="addWishShow"
    >
    </addWish>
    <wishDetails
      v-if="wishDetailsShow"
      @handleClose="wishDetailsShow = false"
      :dialogVisible="wishDetailsShow"
      :id="id"
    >
    </wishDetails>
    <importExcel
      v-if="importShow"
      @handleClose="
        (val) => {
          importShow = false;
          if (val) getList();
        }
      "
      :dialogVisible="importShow"
    >
    </importExcel>
  </div>
</template>

<script>
import { wishList, wishFinish, delWish } from "@/api/wish.js";
import addWish from "./common/addWish.vue";
import wishDetails from "./common/wishDetails.vue";
import importExcel from "./common/importExcel.vue";
export default {
  name: "",
  props: [""],

  data() {
    return {
      form: {
        user_name: "",
        phone: "",
        release_date: [],
        village_name: "",
        type: "",
        status: "",
        page: 1,
        limit: 10,
      },
      tableData: [],
      total: 0,
      addWishShow: false,
      wishDetailsShow: false,
      id: "",
      importShow: false,
    };
  },

  components: { addWish, wishDetails, importExcel },

  computed: {},

  beforeMount() {},

  mounted() {
    this.getList();
  },

  methods: {
    onSubmit() {
      console.log(this.form.release_date);
      this.getList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form.village_name = "";
      this.getList();
    },
    getList() {
      wishList({
        ...this.form,
        release_date:
          this.form.release_date == null
            ? ""
            : this.form.release_date.join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.page.count;
        }
      });
    },
    onBtns(val, info) {
      if (val == 1) {
        this.id = info.id;
        this.wishDetailsShow = true;
      } else if (val == 2) {
        //完成操作
        this.$refs[`popover-${info.id}`].doClose();
        wishFinish({
          id: info.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          }
          this.getList();
        });
      } else {
        //删除操作
        this.$refs[`popremove-${info.id}`].doClose();
        delWish({
          id: info.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          }
          this.getList();
        });
      }
    },
    handleClick() {
      this.form.page = 1;
      this.getList();
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.wishPage {
  .searchBox {
    margin-bottom: 14px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 120px;

    /deep/.el-form-item {
      margin-bottom: 0;
      .el-input__inner {
        width: 200px;
      }
    }
    .time {
      .el-input__inner {
        width: 360px;
      }
    }
  }
  .tablesCard {
  }
}
</style>
